Vue.component
(
    "ho-html5-qrcode-scanner",
    {
        template: `
<div>
    <div id="qr-reader" style="width: 500px; margin-bottom: 10px;"></div>
    <el-form ref="form" :model="mDecodedResult" label-width="100px">
        <el-form-item label="解码器名称">
            <el-input v-model="mDecodedResult.debugData.decoderName"></el-input>
        </el-form-item>
        <el-form-item label="解码时间">
            <el-input v-model="mDecodedResult.decodedDateTime"></el-input>
        </el-form-item>
        <el-form-item label="条码格式编号">
            <el-input v-model="mDecodedResult.format.format"></el-input>
        </el-form-item>
        <el-form-item label="条码格式">
            <el-input v-model="mDecodedResult.format.formatName"></el-input>
        </el-form-item>
        <el-form-item label="解码内容">
            <el-input type="textarea" v-model="mDecodedResult.text"
            :autosize="{ minRows: 3, maxRows: 10}"></el-input>
        </el-form-item>
    </el-form>
</div>`,
        data: function ()
        {
            return {
                mDecodedResult: {
                    debugData: { decoderName: null },
                    decodedDateTime: null,
                    format: {
                        format: null,
                        formatName: null,
                    },
                    text: null
                },
            }
        },
        mounted: function() {        
            let html5QrcodeScanner = new Html5QrcodeScanner("qr-reader", { fps: 10, qrbox: 250 });
            html5QrcodeScanner.render(this.onScanSuccess);
        },
        // TODO unmounted

        methods: {
            onScanSuccess: function(decodedText, decodedResult) {  
                // 添加扫描时间
                decodedResult.result.decodedDateTime = new Date().toLocaleString();
                this.mDecodedResult = decodedResult.result;
                EventBus.$emit('html5_qrcode_result', decodedResult.result);
            },
        },
    }
);